<template>
  <div>
    <!-- 专门显示视频的 html标签  MP4,omg,avi,没有flv
    muted 静音
    -->
    <video class="flv" ref="flv" controls muted >1111</video>
    <div>
      <span>12313213131</span>
    </div>
  </div>
</template>

<script>
// 引入flv.js包
import flvjs from 'flv.js'
export default {
  mounted () {
    this.initVide0()
  },
  methods: {
    initVide0 () {
      // 获取到video标签
      console.log(this.$refs.flv)
      // 获取到video标签
      console.log(document.querySelector('.flv'))

      // if (flvjs.isSupported()) {
      //   console.log('支持的')
      // }else{
      //   console.log("出问题了,浏览器不支持flv.js")
      // }

      // 如果浏览器支持flv.js,才创建播放器
      if (!flvjs.isSupported()) {
        console.log("出问题了,浏览器不支持flv.js")
        return
      }
      // 浏览器支持的flv.js的方法
      // 播放器配置项
      const option = {
        type: 'flv',
        // 你们的视频地址
        url: 'http://192.168.111.128:8080/live/streamName.flv'
      }
      // 创建播放器,
      const player = flvjs.createPlayer(option)
      // 将播放器挂载到video标签上
      player.attachMediaElement(this.$refs.flv)
      // 加载
      player.load()
      // 播放视频,浏览器警告,不许视频自动播放
      // setTimeout(() => {
      //   player.play()
      // }, 1000)
    },
  }
}
</script>

<style lang="scss" scoped>
// 加载字体库,变成一种样式
@font-face {
  font-family: 'ds';
  // 字体库路径
  src: url('@/assets/font/DS-DIGIT.TTF');
}
span{
  font-family: 'ds';
  font-size: 40px;
  color: yellow;
}
</style>
